<template>
	<view>

		<view class="content">
			<text class="title">{{charge.name}}</text>
			<text class="detail">距离{{distance+ ' | ' +charge.address}}</text>
			<view class="linear">
				<text class="linear-left">充电站</text>

				<view class="btn-detail navi-wrap" @click.stop="navi()">
					<image class="navi-img" src="../../../../static/home/navigation_icon.png" mode="widthFix">
					</image>
					到这去
				</view>

			</view>

		</view>

		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#009B01" label="充电桩信息" label-color="#333333"></u-icon>
			</view>



			<view class="text-line">
				<text class="text-name" style="margin-right: 10upx;">标签:</text>

				<u-grid :border="false" col="5">
					<u-grid-item v-for="(item, index) in tags" :key="index">

						<text class="linear-left tags">{{item}}</text>
					</u-grid-item>
				</u-grid>

			</view>

			<view class="text-line">
				<text class="text-name">品牌:</text>
				<text class="text-value">{{filterNull(charge.detail_info.brand)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">营业时间:</text>
				<text class="text-value">{{filterNull(charge.detail_info.shop_hours)}}</text>
			</view>

		</view>



	</view>
</template>

<script>
	import {
		baidukey
	} from '../../../../common/config.js';

	export default {
		data() {
			return {
				uid: '',
				distance: '',
				charge: {},
				tags: []
			}
		},
		methods: {

			getData() {
				let that = this;
				uni.request({
					url: 'https://api.map.baidu.com/place/v2/detail',
					data: {
						uid: that.uid,
						scope: 2,
						ak: baidukey,
						output: 'json'
					},
					success(res) {
						if (res.statusCode == 200) {
							if (res.data.status == 0) {

								that.charge = res.data.result;
								that.tags = that.strSplit2(that.charge.detail_info.tag);
							}
						}
					},
					fail(res) {
					}
				})
			},

			strSplit2(str) {
				if (str !== '' && str != undefined) {
					return str.split(';')
				} else {
					return []
				}
			},

			navi() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.openLocation({ //​使用微信内置地图查看位置。
							latitude: that.charge.location.lat, //要去的纬度-地址
							longitude: that.charge.location.lng, //要去的经度-地址
							name: that.charge.name,
							address: that.charge.address
						})
					}
				})
			},

		},
		onLoad(op) {
			this.uid = op.uid;
			this.distance = op.distance;
			this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		@include flex(column);
		// height: 200upx;
		background-color: $green12;
		padding: 40upx;

		.title {
			color: $white;
			font-weight: bold;
			font-size: 32upx;

		}

		.detail {
			color: $white;
			font-size: 28upx;
			margin-top: 20upx;
			white-space: normal;
		}

		.linear {
			@include flex;
			align-items: center;
			margin-top: 10upx;
			justify-content: space-between;



			.navi-wrap {
				@include flex;
				align-items: center;
				justify-content: center;
				background-color: $yellowffc;

				.navi-img {
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}
			}
		}
	}

	.linear-left {
		color: $yellowff;
		font-size: 24upx;
		border-radius: 5upx;
		width: 100upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		border: solid 2upx $yellowff;
	}

	.tags {
		width: 126upx;
		color: $green12;
		display: inline-block;
		border: solid 2upx $green12;
	}
</style>
